{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/select2/select2.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/forms/select2/select2-bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/forms/select2/select2.js') }}" type="text/javascript"></script>

{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Select2 Bootstrap</h1>
        </div>
        <form role="form">
        <div class="row">
            <div class="col-lg-6">
                <h2>Basic example</h2>
                <div class="form-group">
                    <label>Default single select</label>                
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Default multi select</label>
                    <select multiple class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-6">
                <h2>Select2 example</h2>
                <div class="form-group">
                    <label>Select2 single select</label>
                    <select class="form-control select2">
                            <option></option>
                        <optgroup label="Alaskan/Hawaiian Time Zone">
                            <option value="AK">Alaska</option>
                            <option value="HI">Hawaii</option>
                        </optgroup>
                        <optgroup label="Pacific Time Zone">
                            <option value="CA">California</option>
                            <option value="NV">Nevada</option>
                            <option value="OR">Oregon</option>
                            <option value="WA">Washington</option>
                        </optgroup>
                        <optgroup label="Mountain Time Zone">
                            <option value="AZ">Arizona</option>
                            <option value="CO">Colorado</option>
                            <option value="ID">Idaho</option>
                            <option value="MT">Montana</option><option value="NE">Nebraska</option>
                            <option value="NM">New Mexico</option>
                            <option value="ND">North Dakota</option>
                            <option value="UT">Utah</option>
                            <option value="WY">Wyoming</option>
                        </optgroup>
                        <optgroup label="Central Time Zone">
                            <option value="AL">Alabama</option>
                            <option value="AR">Arkansas</option>
                            <option value="IL">Illinois</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="OK">Oklahoma</option>
                            <option value="SD">South Dakota</option>
                            <option value="TX">Texas</option>
                            <option value="TN">Tennessee</option>
                            <option value="WI">Wisconsin</option>
                        </optgroup>
                        <optgroup label="Eastern Time Zone">
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="IN">Indiana</option>
                            <option value="ME">Maine</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="OH">Ohio</option>
                            <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
                            <option value="VT">Vermont</option><option value="VA">Virginia</option>
                            <option value="WV">West Virginia</option>
                        </optgroup>
                    </select>
                </div>
                <div class="form-group">
                    <label>Select2 multi select</label>
                    <select class="form-control select2-multiple" multiple>
                        <optgroup label="Alaskan/Hawaiian Time Zone">
                            <option value="AK">Alaska</option>
                            <option value="HI">Hawaii</option>
                        </optgroup>
                        <optgroup label="Pacific Time Zone">
                            <option value="CA">California</option>
                            <option value="NV">Nevada</option>
                            <option value="OR">Oregon</option>
                            <option value="WA">Washington</option>
                        </optgroup>
                        <optgroup label="Mountain Time Zone">
                            <option value="AZ">Arizona</option>
                            <option value="CO">Colorado</option>
                            <option value="ID">Idaho</option>
                            <option value="MT">Montana</option><option value="NE">Nebraska</option>
                            <option value="NM">New Mexico</option>
                            <option value="ND">North Dakota</option>
                            <option value="UT">Utah</option>
                            <option value="WY">Wyoming</option>
                        </optgroup>
                        <optgroup label="Central Time Zone">
                            <option value="AL">Alabama</option>
                            <option value="AR">Arkansas</option>
                            <option value="IL">Illinois</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="OK">Oklahoma</option>
                            <option value="SD">South Dakota</option>
                            <option value="TX">Texas</option>
                            <option value="TN">Tennessee</option>
                            <option value="WI">Wisconsin</option>
                        </optgroup>
                        <optgroup label="Eastern Time Zone">
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="IN">Indiana</option>
                            <option value="ME">Maine</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="OH">Ohio</option>
                            <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
                            <option value="VT">Vermont</option><option value="VA">Virginia</option>
                            <option value="WV">West Virginia</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Default single select with button at the begin</label>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                        <select class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Default single select with button at the end</label>
                    <div class="input-group">
                        <select class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label>Default single select with button at the end</label>
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <select class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Default single select <code>.select2-bootstrap-prepend</code></label>
                    <div class="input-group select2-bootstrap-prepend"">
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                        <select class="form-control select2">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Default single select <code>.select2-bootstrap-append</code></label>
                    <div class="input-group select2-bootstrap-append">
                        <select class="form-control select2">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label>Default single select <code>.select2-bootstrap-prepend</code> and <code>.select2-bootstrap-append</code></label>
                    <div class="input-group select2-bootstrap-prepend select2-bootstrap-append">
                        <span class="input-group-addon">@</span>
                        <select class="form-control select2">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Default multi select with button at the begin</label>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                        <select multiple class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Default multi select with button at the end</label>
                    <div class="input-group">
                        <select multiple class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Default multi select <code>.select2-bootstrap-prepend</code></label>
                    <div class="input-group select2-bootstrap-prepend">
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                        <select multiple class="form-control select2-multiple">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Default multi select <code>.select2-bootstrap-append</code></label>
                    <div class="input-group select2-bootstrap-append">
                        <select multiple class="form-control select2-multiple">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Select2 append Checkbox</label>
                    <div class="input-group">
                        <span class="input-group-addon">
                            <input type="checkbox">
                        </span>
                        <select class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                 </div>
                 <div class="form-group">
                     <label>Select2 multi append Radiobutton</label>
                     <div class="input-group">
                         <span class="input-group-addon">
                             <input type="radio">
                         </span>
                         <select multiple class="form-control">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                     </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Select2 Checkbox <code>.select2-bootstrap-prepend</code></label>
                    <div class="input-group select2-bootstrap-prepend">
                        <span class="input-group-addon">
                            <input type="checkbox">
                        </span>
                        <select class="form-control select2">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                    </div>
                 </div>
                 <div class="form-group">
                     <label>Select2 multi append Radiobutton</label>
                     <div class="input-group select2-bootstrap-prepend">
                         <span class="input-group-addon">
                             <input type="radio">
                         </span>
                         <select multiple class="form-control select2-multiple">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                     </div>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group input-group-lg">
                    <label>Default single select Large</label>                
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Default single select Normal</label>                
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group input-group-sm">
                    <label>Default single select Small</label>                
                    <select class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group input-group-lg">
                    <label>Default multi select Large</label>
                    <select multiple class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Default multi select Normal</label>
                    <select multiple class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group input-group-sm">
                    <label>Default multi select Small</label>
                    <select multiple class="form-control">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group input-group-lg">
                    <label>Select2 single select Large</label>                
                    <select class="form-control select2">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Select2 single select Normal</label>                
                    <select class="form-control select2">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group input-group-sm">
                    <label>Select2 single select Small</label>                
                    <select class="form-control select2">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group input-group-lg">
                <label>Select2 multi select Large</label>
                    <select multiple class="form-control select2-multiple">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Select2 multi select Normal</label>
                    <select multiple class="form-control select2-multiple">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
                <div class="form-group input-group-sm">
                    <label>Select2 multi select Small</label>
                    <select multiple class="form-control select2-multiple">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                </div>
            </div>
        </div>
        </form>
    </div> <!-- /container -->
    
    
    <script type="text/javascript">
        var placeholder = "Select a State";
        $( ".select2, .select2-multiple" ).select2( { placeholder: placeholder } );
    </script>
{% endblock %}